<html>
    <head>
        <title>透析助手</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.6/css/sm.min.css">
        <link rel="stylesheet" href="__PUBLIC__/css/swiper.css">
        <link rel="stylesheet" href="__PUBLIC__/css/style.css">
        <link rel="stylesheet" href="__PUBLIC__/css/5s.css">
        <link rel="stylesheet" href="__PUBLIC__/css/6m.css">
        <link rel="stylesheet" href="__PUBLIC__/css/iconfont.css">
    </head>
	<style>
	  .swiper-wrapper,.swiper-slide{height:auto !important;}
	</style>
    <body>
        <div class="head">
            <div class="HeadContent">
                <a href="<{:U('Index/index')}>" class="backIndex"><i class="iconfont">&#xe605;</i></a>
                <a href="javascript:;" class="HeadTitle">点击日期添加透析记录</a>
            </div>
        </div>
        <div class="sevenday">
            <ul>
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
        </div>
        <div class="date-div">
            <div class="swiper-container-date">
                <div class="swiper-wrapper">

                </div>
            </div>
        </div>
        <div style="overflow:hidden;padding-top:0.5rem;">
            <div style="float:left;margin-left:3.75%;" onclick="changeMonth('pre')"><i class="iconfont">&#xe605;</i>上月</div>
            <div style="float:right;margin-right:3.75%" onclick="changeMonth('next')">下月<i class="iconfont">&#xe60a;</i></div>
        </div>
        <script type='text/javascript' src='__PUBLIC__/js/jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='__PUBLIC__/js/swiper.min.js'></script>
        <script type='text/javascript' src='__PUBLIC__/js/myjq.js'></script>
        <script>
                var today = new Date();
                var y = today.getFullYear();//本年
                var m = today.getMonth() + 1;//本月
                var d = today.getDate();//本天
                var todyTime = getDateTime(y + '-' + m + '-' + d);//本天时间戳

                //上月下月翻页
                function changeMonth(act) {
                    if (act == 'pre') {
                        m = parseInt(m) - 1;
                    } else {
                        m = parseInt(m) + 1;
                    }
                    if (m < 1) {
                        m = 12;
                        y--;
                    } else if (m > 12) {
                        m = 1;
                        y++;
                    }
                    $('.swiper-slide').slideUp(500);
                    setTimeout(function () {
                        $('.swiper-slide').remove();
                        dateAct(y, m, d);
                    }, 800);
                }

                dateAct(y, m, d);//组装日历界面

                function dateAct(year, month, day) {
                    //外层div
                    $wrapStr = '<div class="swiper-slide" year=' + year + ' month=' + month + ' id="date' + year + month + '">';
                    $wrapStr += '<div class="date-operate"></div></div>';
                    $('.swiper-wrapper').append($wrapStr);

                    //年月标题
                    var monthTitle = '<div class="year-month">' + year + '年' + month + '月</div><ul class="date-list" id="' + year + "-" + month + '"></ul>';
                    $("#date" + year + month).children(".date-operate").append(monthTitle);

                    var date_content = '',
                            oneDate  = new Date(year + '-' + month + '-' + '01');//本月一号日期对象

                    //一号前空几格
                    for (var j = 1; j <= oneDate.getDay(); j++) {
                        date_content += '<li><a></a></li>';
                    }

                    var currentM = new Date(year, month, 0);
                    var dayNum = currentM.getDate();//本月有几天
                    var now_day,now_time;
                    
                    //获取当月已透析的日期
                    $.get("<{:U('getDateStr')}>",{year:year,month:month},function(txDateStr){
                        for (var i = 1; i <= dayNum; i++) {
                            now_day = year + '-' + month + '-' + i;
                            now_time = getDateTime(now_day);
                            if(now_time <= todyTime){//今天和今天之前
                                if(txDateStr.indexOf(','+now_day+',') >= 0){
                                    date_content += '<li onclick="record(\''+now_day+'\',this)" class="td active"><a>' + i + '</a></li>';
                                }else{
                                    date_content += '<li onclick="record(\''+now_day+'\',this)" class="td"><a>' + i + '</a></li>';
                                }
                            }else{//今天之后
                                date_content += '<li><a class="color-grey">' + i + '</a></li>';
                            }
                        }

                        $("#date" + year + month).children(".date-operate").children("#" + year + "-" + month).append(date_content);
                    });
                }
                
                //记录透析
                function record(date,obj){
                    if($(obj).hasClass('active')){
                        $(obj).removeClass('active');
                        $.get('<{:U("add")}>',{date:date,status:0});
                    }else{
                        $(obj).addClass('active');
                        $.get('<{:U("add")}>',{date:date,status:1});
                    }
                }
                
                //返回日期的时间戳
                function getDateTime(startDate){
                    var startArr = startDate.split("-");
                    var startTime = new Date(startArr[0], startArr[1], startArr[2]);
                    return startTime.getTime();
                }
        </script>
    </body>
</html>